<template>
  <div class="container">
    <Breadcrumb :items="['menu.problem', 'menu.problem.sample']"/>
    <a-form ref="formRef" layout="vertical">
      <a-space direction="vertical" :size="16" style="margin-bottom: 20px;">
        <a-card class="general-card" :title="$t('problem.sample.test')" style="min-height: 200px">
          <a-upload
              :auto-upload="false"
              :limit="12"
              ref="uploadRef"
              :custom-request="customRequest"
              @change="onChange"
              :show-retry-button="false"
              :show-link="false"
              @before-upload="beforeUpload"
              :list-type="'text'"
              multiple
              :custom-icon="getCustomIcon()"
              :tip="$t('problem.sample.file.tip')"
          >
            <template #upload-button>
              <a-space>
                <a-button> {{ $t('problem.sample.file.select') }}</a-button>
              </a-space>
            </template>
          </a-upload>
        </a-card>
      </a-space>
      <a-space direction="vertical" :size="16">
        <a-card class="general-card" :title="$t('problem.sample.submit')">
          <a-button type="primary" @click="submitProblem()">{{ $t('problem.sample.submit.submit') }}</a-button>
        </a-card>
      </a-space>
    </a-form>
  </div>
</template>

<script lang="ts" setup>
import {ref} from 'vue';
import useLoading from '@/hooks/loading';
import type {FileItem, RequestOption} from "@arco-design/web-vue/es/upload/interfaces";
import {updateProblemSample} from '@/api/problem'
import {Message} from "@arco-design/web-vue";
import {useI18n} from 'vue-i18n';
import {useRouter} from 'vue-router';

const {loading, setLoading} = useLoading();
const layout = ref('vertical')
const inline = ref('inline');
const horizontal = ref('horizontal')
const files = ref<FileItem[]>([]);
const uploadRef = ref();
const {t} = useI18n();
const router = useRouter();

const onChange = (fileList: FileItem[]) => {
  files.value = fileList;
};

const submitProblem = async () => {
  const formData = new FormData();
  for (let i =0;i<files.value.length;i+=1){
    formData.append("files",files.value[i].file as Blob);
  }
  const { redirect, ...othersQuery } = router.currentRoute.value.query;
  formData.append("problemId",othersQuery.problemId as unknown as string)
  try {
    const res = await updateProblemSample(formData);
    Message.success(t('problem.create.submit.success'));
    router.push({
      name: 'ProblemInfo',
    });
  }catch (e){
    console.log('发生错误')
  }
}
const beforeUpload = (file: File) => {
  return file.name.endsWith('txt');
};

const getCustomIcon = () => {
  return {
    fileName: (file: File) => {
      if (file.name.endsWith("input.txt"))
        return `[输入文件]: ${file.name}`
      if (file.name.endsWith("output.txt"))
        return `[输出文件]: ${file.name}`
      return `[未识别文件]: ${file.name}`
    },
  };
};

const customRequest = (option: RequestOption) => {

  return null;
}

</script>

<script lang="ts">
export default {
  name: 'ProblemSample',
};
</script>

<style scoped lang="less">
.container {
  padding: 0 20px 40px 20px;
  overflow: hidden;
}

.actions {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 60px;
  padding: 14px 20px 14px 0;
  background: var(--color-bg-2);
  text-align: right;
}

.general-card {
  border-radius: 4px;
  border: none;

  & > .arco-card-header {
    height: auto;
    padding: 20px;
    border: none;
  }

  & > .arco-card-body {
    padding: 0 20px 20px 20px;
  }
}


</style>